{% load bootstrap4 %}

<!doctype html>
<html lang="en">
  <head>
    <title>{% block page_title %}{{ title }}{% endblock page_title %}</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="maximum-scale=1, user-scalable=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/editor.md/css/editormd.preview.css" />
    <link rel="stylesheet" href="/static/editor.md/css/editormd.min.css" />
    <link rel="stylesheet" href="/static/css/bootstrap-markdown.min.css" />
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="/static/js/jquery-3.5.1.min.js" ></script>
    <script src="/static/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="/static/css/mystyle.css" />
    <style>
        html,
        body { height: 100%; padding: 0; margin: 0;}
        .outer { height: 100%;  box-sizing: border-box ; position: relative; padding: 72px 0 0; }
        .A { height:72px; position: fixed; top:0; z-index:1;}
        .B { height: 99%; }
    </style>
  </head>
  <body>
    <script>
    String.prototype.replaceAll = function(strReplace, strWith) {
        // See http://stackoverflow.com/a/3561711/556609
        var esc = strReplace.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
        var reg = new RegExp(esc, 'ig');
        return this.replace(reg, strWith);
    };
    </script>
    <div class="container outer">
      <div id="top-navbar" class="container A">
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">

              <a class="navbar-brand" href="/">HOL4 Reference</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                {% block navbar_status %}
                <li class="active"><a href="#">结果<span class="sr-only">(current)</span></a></li>
                <li><a type="submit" href="/community/group" target="_blank">社区</a></li>
                <li><a type="submit" href="/community/question/?q=11" target="_blank">Github</a></li>
                {% endblock navbar_status %}
              </ul>
              <form action="/result/" class="navbar-form navbar-left">
                <div class="form-group">
                  <input type="search" class="form-control" placeholder="Search for..." name="q" value={{ q }}>
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
              </form>
              {% block nav_other %}
              {% endblock nav_other %}
              <ul class="nav navbar-nav navbar-right">
                {% if user == None %}
                <li><a href="/login?url={{ request.get_full_path }}">登录</a></li>
                <li><a href="/register?url={{ request.get_full_path }}">注册</a></li>
                {% else %}
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ user.name }} <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                  <script>$('.dropdown-toggle').dropdown();</script>
                    {% if user.admin == 1 %}
                    <li><a href="/webadmin">Web admin</a></li>
                    <li role="separator" class="divider"></li>  
                    {% endif %}
                    <li><a href="/user/index">个人信息</a></li>
                    <li><a href="/user/comment">留言和笔记</a></li>
                    <li><a href="/community/group">社区</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="/logout?purl={{ request.get_full_path }}">退出登录</a></li>
                  </ul>
                </li>
                {% endif %}
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
      </div>
      <div class="row container B">
      {% block main_div %}
        <div id="result-window" class="col-md-8">
          {% for each in fromDB %}
          <div name="{{ each.structure.name }}_{{ each.name }}" class="panel panel-default">
            <div class="panel-heading" style="white-space: nowrap;">
              <a href="/tactic/?name={{ each.name|urlencode }}&stru={{ each.structure.name }}" target="_blank"><h3 id="{{ each.structure.name }}_{{ each.name }}_name" class="panel-title" style="display : inline;">{{ each.name }}</h3></a>
              <a href="/structure/?q={{ each.structure.name }}"><h4 id="{{ each.structure.name }}_{{ each.name }}_stru" class="panel-title" style="display: inline; font-size: 80%;">({{ each.structure.name }})</h4></a>
              {% if each.seealso != '0' %}
              <div class="navbar-right"><a href="/tactic/?name={{ each.name|urlencode }}&stru={{ each.structure.name }}#comments" style="margin-right: 20px;">{{ each.seealso }} <span class="glyphicon glyphicon-comment"></span></a></div>
              {% endif %}
            {% if each.type == 'thm' %}
              <div class="navbar-right" style="margin-right: 20px;">
                <span class="label label-primary"> thm </span>
              </div>
            {% endif %}
            </div>
            <script>
              var element=document.getElementById("{{ each.structure.name }}_{{ each.name }}_name");
                  element.innerHTML=element.innerHTML.replaceAll("{{ q }}", '<span class="search-result" style="color: #EE7876;">$&</span>');
            </script>
            <script>
              var element=document.getElementById("{{ each.structure.name }}_{{ each.name }}_stru");
                  element.innerHTML=element.innerHTML.replaceAll("{{ q }}", '<span class="search-result" style="color: #EE7876;">$&</span>');
            </script>
            <div class="panel-body">
            {% if each.type != 'thm' %}
              <p class="well">{{ each.type }}</p>
            {% endif %}
              {% if each.synopsis != None %}
              <div class="col-md-12">
                <p id="{{ each.structure.name }}_{{ each.name }}_syno" class="navbar-text">{{ each.synopsis }}</p>
              </div>
              <div class="col-md-12">
                <p id="{{ each.structure.name }}_{{ each.name }}_syno_cn" class="navbar-text" style="color: gray;">{{ each.synopsis_cn }}</p></div>
              {% endif %}
            </div>
            <script>
              var element=document.getElementById("{{ each.structure.name }}_{{ each.name }}_syno");
                  element.innerHTML=element.innerHTML.replace(/{\*/g, '\n<span class="code">').replace(/\*}/g, '</span>').replace(/%\*/g, '<span class="function">').replace(/\*%/g, '</span>').replaceAll("{{ q }}", '<span class="search-result" style="color: #EE7876;">$&</span>');
            </script>
            <script>
              var element=document.getElementById("{{ each.structure.name }}_{{ each.name }}_syno_cn");
                  element.innerHTML=element.innerHTML.replace(/{\*/g, '\n<span class="code">').replace(/\*}/g, '</span>').replace(/%\*/g, '<span class="function">').replace(/\*%/g, '</span>').replaceAll('{{ q }}', '<span class="search-result" style="color: #EE7876;">$&</span>');
            </script>
          </div>
          {% endfor %}
          <div style="text-align:center;">
          {% if pager.num_pages > 1 %}
            <nav aria-label="...">
              <ul class="pagination">
                {% if fromDB.has_previous %}
                  <li><a href="?q={{ q }}{% if onlyshow != None %}&onlyshow={{ onlyshow }}&{% endif %}&n={{ fromDB.previous_page_number }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                {% else %}
                  <li class="disabled"><span aria-label="Previous"><span aria-hidden="true">&laquo;</span></span></li>
                {% endif %}
                {% for each in showpagerange %}
                  {% if each == fromDB.number %}
                    <li class="active"><span>{{ each }} <span class="sr-only">(current)</span></span></li>  
                  {% else %}
                    <li><a href="?q={{ q }}{% if onlyshow != None %}&onlyshow={{ onlyshow }}&{% endif %}&n={{ each }}">{{ each }} <span class="sr-only">(current)</span></a></li>
                  {% endif %}
                {% endfor %}
                {% if fromDB.has_next %}
                  <li><a href="?q={{ q }}{% if onlyshow != None %}&onlyshow={{ onlyshow }}&{% endif %}&n={{ fromDB.next_page_number }}" aria-label="Previous"><span aria-hidden="true">&raquo;</span></a></li>
                {% else %}
                  <li class="disabled"><span aria-label="Previous"><span aria-hidden="true">&raquo;</span></span></li>
                {% endif %}
              </ul>
            </nav>
          {% endif %}
          </div>
        </div>
        <div id="structure-nav" class="col-md-4" style="left:auto; top:auto; width:auto;">
        {% if onlyshow == None %}
        <label for="">{% block result_msg %}搜索到{% endblock result_msg %}<b style="color:orangered"> {{ result_num }} </b>个结果</label>
        {% else %}
        <label for="">显示<b style="color:orangered"> {{ onlyshow }} </b>中的结果</label>
        {% endif %}
          <div style="text-align:center;">
          {% if pager.num_pages > 1 %}
            <nav aria-label="...">
              <ul class="pagination">
                {% for each in showpagerange %}
                  {% if each == fromDB.number %}
                    <li class="active"><span>{{ each }} <span class="sr-only">(current)</span></span></li>  
                  {% else %}
                    <li><a href="?q={{ q }}&{% if onlyshow != None %}onlyshow={{ onlyshow }}&{% endif %}n={{ each }}">{{ each }} <span class="sr-only">(current)</span></a></li>
                  {% endif %}
                {% endfor %}
              </ul>
            </nav>
          {% endif %}
          </div>
          {% if distribution == None %}
          {% else %}
          <p>分布于：</p>
          <table class="table table-hover table-condensed" style="table-layout:fixed;overflow:hidden;text-overflow: ellipsis;">
            <tbody class="">
            {% for each in distribution %}
              
              <tr {% if onlyshow == each.stru.name %}class="active"{% endif %} style="height:50px;">
                <td style="width: 35%; overflow:hidden; vertical-align: middle;"><a href="?q={{ q }}{% if onlyshow != each.stru.name %}&onlyshow={{ each.stru.name }}{% endif %}">{{ each.stru.name }}</a></td>
                <td>
                  <div class="progress" style="margin-top: 15px; margin-bottom:15px">
                  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: {{ each.value }}">
                      <span class="sr-only">{{ each.value }}</span>
                    </div>
                  </div>
                </td>
                {% if each.num > 999 %}
                  <td style="width: 60px" class="num_icon">
                {% elif each.num > 99 %}
                  <td style="width: 50px" class="num_icon">
                {% elif each.num > 9 %}
                  <td style="width: 40px" class="num_icon">
                {% else %}
                  <td style="width: 30px" class="num_icon">
                {% endif %}
                <span class="badge" style="margin-top: 16px">{{ each.num }}</span></td>
              </tr>
            {% endfor %}
            </tbody>
          </table>  
          {% endif %}
        </div>
        <script>
        function structureNavPosition () {
          var result_window = document.getElementById('result-window');
          var top_navbar = document.getElementById('top-navbar');
          var pleft = result_window.getBoundingClientRect().right;
          var ptop = top_navbar.getBoundingClientRect().bottom;
          var pwidth = result_window.getBoundingClientRect().width / 2;
          var structure_nav = document.getElementById('structure-nav');
          // console.log(pleft,ptop,pwidth);
          if (structure_nav.getBoundingClientRect().height > $(window)[0].innerHeight) {
            structure_nav.style.position = "relative";
            structure_nav.style.left = "";
            structure_nav.style.top = "";
            structure_nav.style.width = "";
          } else {
            structure_nav.style.position = "fixed";
            structure_nav.style.left = "" + pleft + "px";
            structure_nav.style.top = "" + ptop + "px";
            structure_nav.style.width = "" + pwidth + "px";
          }
        }
        structureNavPosition();
        firstFire = null;
        
        window.onresize = function () {
          if (firstFire == null) {
            firstFire = setTimeout(function () {
              structureNavPosition();
              firstFire = null;
            }, 200);
          }
        }
        </script>
      {% endblock main_div %}
      </div>
      <div class="t-right-bar">
        <div class="t-bar-support" data-open-online-form><span class="glyphicon glyphicon-send"></span><a href="/community/question/?q=11&gname=world">反馈建议</a></div>
        <div class="t-bar-rocket" id="back-to-top"><span class="glyphicon glyphicon-chevron-up"></span> 返回顶部</div>
      </div>
    </div>
      <script>
          $(".t-right-bar").hide();
          $(function () {
              $(window).scroll(function () {
                //$(window)[0].innerHeight
                // console.log($(window).scrollTop());
                  if ($(window).scrollTop() >= ($(window)[0].innerHeight)/2) {
                      $(".t-right-bar").fadeIn(500);
                  }
                  else {
                      $(".t-right-bar").fadeOut(500);
                  }
              });

              $("#back-to-top").click(function () {
                  $('body,html').animate({scrollTop: 0}, 100);
                  return false;
              });
          });
          // 右下导航栏部分代码源自：https://blog.csdn.net/Ariel_201311/article/details/82999652
      </script>
  </body>
</html>